<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:21:32
 * @FilePath: \i-hos-app\shared\emr\src\components\insert\Signature.vue
 * @Description: 签名插入组件
-->
<template>
  <div class="signature">
    <canvas
      ref="canvas"
      width="500"
      height="260"
      class="signatureCanvas"
      tabindex="0"
      @mousedown="onMouseDown"
      @click.native.prevent
    />
    <footer slot="footer" class="dialog-footer">
      <el-button @click="clearPanel">取消</el-button>
      <el-button type="success" @click.native.prevent="clearPanel">清空签名</el-button>
      <el-button type="primary" @click="confirm">确认签名</el-button>
    </footer>

    <div ref="refInsertComponent" style="display: none">
      <img class="imgCanvas" :src="imgUrl" :contenteditable="false" :data-config="JSON.stringify(config)" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, Ref, nextTick, reactive } from 'vue'
  // 接口约束
  import { IConfig } from '../../interface/page'
  // 组件插入hooks
  import { useInsertComponent } from '../../hooks/useInsertComponent'
  const refInsertComponent: Ref<HTMLElement | null> = ref(null) // 初始化组件插入节点
  const canvas: Ref<HTMLCanvasElement | null> = ref(null) // 初始化签名板节点
  const imgUrl: Ref<string> = ref('') // 初始化签名完成的图片
  const isCanvas: Ref<boolean> = ref(false) // 初始化签名版子是否有内容
  let config: IConfig = reactive({
    type: '签名',
  })

  // 开始签名
  const onMouseDown = (e: any): void => {
    const el: any = e.target || e.srcElement
    const ctx: any = el.getContext('2d')
    ctx.lineWidth = 5 * window.devicePixelRatio
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    ctx.beginPath()
    ctx.moveTo(e.offsetX, e.offsetY)
    ctx.lineTo(e.offsetX, e.offsetY)
    ctx.strokeStyle = '#000'
    ctx.stroke()
    el.onmousemove = (e: any): void => {
      if (e.which === 0) {
        el.onmousemove = null
        el.onmouseup = null
        return
      }
      ctx.lineTo(e.offsetX, e.offsetY)
      ctx.stroke()
    }
    el.onmouseup = (): void => {
      el.onmousemove = null
      el.onmouseup = null
    }
    el.focus()
    isCanvas.value = true
  }

  // 清空签名
  const clearPanel = (): void => {
    nextTick((): void => {
      const ctx: any = (canvas.value as HTMLCanvasElement).getContext('2d')
      // clearRect(清除的起点x轴,清除的起点y轴,清除画布的宽,清除画布的高);
      ctx.clearRect(0, 0, (canvas.value as HTMLCanvasElement).width, (canvas.value as HTMLCanvasElement).height)
    })
    isCanvas.value = false
  }

  // 确认签名
  const confirm = (): void => {
    nextTick((): void => {
      try {
        // 创建一个空canvas对象
        const blank = document.createElement('canvas') as HTMLCanvasElement
        blank.width = (canvas.value as HTMLCanvasElement).width
        blank.height = (canvas.value as HTMLCanvasElement).height
        imgUrl.value = (canvas.value as HTMLCanvasElement).toDataURL()
      } catch (e: any) {
        console.warn(e)
      }
      setTimeout(() => {
        if (!isCanvas.value) return
        // 向电子病历页面插入的组件
        useInsertComponent(refInsertComponent.value as HTMLElement)
        // 签名成功确认之后清空面板
        clearPanel()
      })
    })
  }
</script>
<style scoped lang="scss">
  .signature {
    .signatureCanvas {
      border: 1px dashed #409eff;
      background-color: #f2f2f2;
      border-radius: 4px;
      cursor:
        url('')
          0 32,
        auto;
    }
  }
  .imgCanvas {
    width: 100px;
    height: auto;
    cursor: pointer;
  }
</style>
